import React from 'react';
import { Button, Typography } from 'antd';
import { ChevronDown } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import ScrollingTutorial from '../components/ScrollingTutorial';
import { motion } from 'framer-motion';

const { Title, Text } = Typography;

const Dashboard: React.FC = () => {
    const navigate = useNavigate();
    const handleStartCreating = () => {
        navigate('/projects');
    };
    const handleScrollToTutorial = () => {
        const tutorialElement = document.querySelector('.tutorial-header');
        if (tutorialElement) {
            tutorialElement.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <div style={{ overflowX: 'hidden' }}>
            {/* 标题区域 - 放在最上方正中间 */}
            <motion.div
                initial={{ opacity: 0, y: -50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
                style={{
                    textAlign: 'center',
                    width: '100%',
                    marginTop: '80px',
                    padding: '0 20px',
                }}
            >
                <Title
                    level={1}
                    style={{
                        color: '#FFFFFF',
                        fontSize: 'clamp(2.5rem, 6vw, 4rem)',
                        fontWeight: '800',
                        marginBottom: '32px',
                        lineHeight: '1.2',
                        letterSpacing: '-0.025em',
                        textShadow: '0 2px 8px rgba(0, 0, 0, 0.03)',
                    }}
                >
                    自由编导
                </Title>
                <Text
                    style={{
                        fontSize: 'clamp(1rem, 2vw, 1.5rem)',
                        color: '#FFFFFF',
                        display: 'block',
                        maxWidth: '700px',
                        margin: '0 auto',
                        lineHeight: '1.7',
                        letterSpacing: '0.01em',
                    }}
                >
                    强大的剪映自动化工具，让您快速高效地创建和编辑视频项目，释放您的创造力
                </Text>
            </motion.div>

            {/* 按钮区域 - 放在页面中间 */}
            <motion.div
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.3 }}
                style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    gap: '24px',
                    marginTop: '60px',
                    marginBottom: '120px',
                    padding: '0 20px',
                }}
            >
                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
                    <Button
                        type="primary"
                        size="large"
                        style={{
                            height: 'clamp(50px, 10vw, 80px)',
                            padding: '0 48px',
                            fontSize: 'clamp(1.25rem, 3vw, 1.75rem)',
                            fontWeight: '700',
                            borderRadius: '40px',
                            background: 'linear-gradient(90deg, #3B82F6, #60A5FA)',
                            border: 'none',

                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                            minWidth: '200px',
                            textTransform: 'uppercase',
                            letterSpacing: '0.05em',
                        }}
                        onClick={handleStartCreating}
                    >
                        开始创作
                    </Button>
                </motion.div>

                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
                    <Button
                        type="text"
                        style={{
                            marginTop: 200,
                            display: 'flex',
                            alignItems: 'center',
                            color: '#FFFFFF',
                            fontSize: 'clamp(1rem, 2vw, 1.25rem)',
                            fontWeight: '600',
                            padding: '8px 24px',
                            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                            textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
                        }}
                        onClick={handleScrollToTutorial}
                    >
                        了解如何使用{' '}
                        <ChevronDown
                            size={18}
                            style={{
                                marginLeft: '10px',
                                transition: 'transform 0.3s ease',
                                color: '#FFFFFF',
                            }}
                        />
                    </Button>
                </motion.div>
            </motion.div>

            {/* 滚动教程区域 */}
            <ScrollingTutorial />
        </div>
    );
};

export default Dashboard;
